<template>
  <div>
    <!-- 折叠按钮 -->
    <el-button @click="toggleCollapse" class="collapse-button"
               :class="collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
               :style="{ '--menu-bg-color': activeColor }"></el-button>
    <!-- 菜单 -->
    <el-menu
        :default-active="activePath"
        class="el-menu-vertical-demo"
        @select="handleSelect"
        :collapse="collapse"
        :router="true"
        :style="{ '--menu-bg-color': activeColor,
                  '--menu-hover-color': activeHoverColor,
                  '--menu-active-color': activeSelectedColor }"
    >
      <!-- 固定标题图片 -->
      <img class="fixed-nav-title" src="../assets/page/fixed-nav-title.png" alt="">
      <!-- 遍历路由列表生成菜单项 -->
      <el-menu-item
          v-for="route in routerList"
          :key="route.path"
          :index="route.path"
      >
        <span>{{ route.meta.title }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import {onBeforeUnmount, onMounted, ref, watch} from 'vue'
import {useRouter, useRoute} from 'vue-router'

export default {
  name: 'Sidebar',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const routes = router.options.routes
    const routerList = []

    // 遍历路由，将子路由添加到 routerList
    routes.forEach((item) => {
      if (item.path === '/Home') {
        const children = item.children
        routerList.push(...children)
      }
    })

    const collapse = ref(false)
    const activePath = ref(route.path)
    const activeColor = ref('')
    const activeSelectedColor = ref('')
    const activeHoverColor = ref('')

    // 增加颜色亮度的函数
    const increaseBrightness = (hex, percent) => {
      const num = parseInt(hex.slice(1), 16),
          amt = Math.round(2.55 * percent),
          R = (num >> 16) + amt,
          G = (num >> 8 & 0x00FF) + amt,
          B = (num & 0x0000FF) + amt;
      return `#${(0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1).toUpperCase()}`;
    }

    // 更新活动菜单项的颜色
    const updateActiveColor = (path) => {
      const matchRoute = routerList.find((route) => route.path === path)
      if (matchRoute && matchRoute.meta && matchRoute.meta.color) {
        activeColor.value = matchRoute.meta.color
        activeSelectedColor.value = increaseBrightness(matchRoute.meta.color, 10)
        activeHoverColor.value = increaseBrightness(matchRoute.meta.color, 10)
      } else {
        activeColor.value = '#71361D' // 默认颜色
      }
    }

    // 切换折叠状态
    const toggleCollapse = () => {
      collapse.value = !collapse.value
    }

    // 处理菜单项选择
    const handleSelect = (index) => {
      router.push(index)
    }

    // 监听路由变化，更新活动路径和颜色
    watch(route, (newRoute) => {
      activePath.value = newRoute.path
      updateActiveColor(newRoute.path)
    }, { immediate: true })

    return {
      routes,
      activePath,
      collapse,
      routerList,
      activeColor,
      activeSelectedColor,
      activeHoverColor,
      toggleCollapse,
      handleSelect
    }
  }
}
</script>

<style scoped>
.fixed-nav-title {
  width: 200px;
  height: 133px;
}
.el-menu-vertical-demo {
  width: 200px;
  min-height: 100vh;
  background-color: var(--menu-bg-color, #71361D); /* 默认颜色 */
}

.el-menu--collapse {
  width: 0px !important;
}

.el-menu-item:hover {
  background-color: var(--menu-hover-color, #71361D); /* 固定悬停颜色 */
}

.el-menu-item {
  color: #e1e1e1;
}

.el-menu-item.is-active {
  background-color: var(--menu-active-color, #71361D); /* 固定选中颜色 */
  color: #ffffff;
}

.el-menu--collapse .el-submenu__title > span {
  display: none;
}

.el-menu--collapse .el-menu-item > span {
  display: none;
}

.collapse-button {
  border: none;
  width: 40px;
  height: 40px;
}

.el-icon-s-unfold {
  position: absolute;
  top: calc(50% - 50px);
  z-index: 1;
  background: no-repeat center/100% url(../assets/page/fixed-nav-more-arrow.png);
  transform: rotate(180deg);
  background-color: var(--menu-bg-color, #71361D);
  border-radius: 50%;
  background-size: 40px 40px;
  width: 80px;
  height: 80px;
  cursor: pointer;
  left: -40px;
  transition: all 0.4s;
}

.el-icon-s-fold {
  position: absolute;
  top: calc(50% - 50px);
  left: 160px;
  width: 80px;
  height: 80px;
  z-index: 1;
  background: no-repeat center/100% url(../assets/page/fixed-nav-more-arrow.png);
  background-color: var(--menu-bg-color, #71361D);
  background-size: 40px 40px;
  transition: all 0.4s;
  border-radius: 50%;
}
</style>
